<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hub.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="nav">弈- 多人在线五子棋pk系统</div>

    <div class="container">
        <div>
            <div id="screen">玩家信息</div>
            <button id="submit" onclick="findPlayer()">开始匹配</button>
        </div>
    </div>


    <script>
        webSocketUrl="ws://"+location.host+"/findPlayer";
        webSocket = new WebSocket(webSocketUrl);
        webSocket.onmessage = function (r) {
            
            msg = JSON.parse(r.data);
            console.log(msg);
            
           


            if (msg.code == "SUCCESS") {
                // console.log("通过success测试");
                if (msg.message == 'start find') {
                    // console.log("通过find测试");
                    $("#submit").text('匹配中...(再次点击停止匹配)');
                } else if (msg.message == 'stop find') {
                    $("#submit").text('开始匹配');
                } else if (msg.message == 'find success') {
                    location.replace("game_room.html");
                    console.log("匹配成功");
                    // alert('匹配成功');
                    
                }else if(msg.message=="禁止用户多开!!! 严重者将予以封号处理"){
                    alert("禁止用户多开!!! 严重者将予以封号处理");
                    location.replace("login.html");

                }
                else if(msg.message=="用户未登录"){
                    alert("用户未登录,即将前往登录页--");
                    location.replace("login.html");

                }else {
                    alert('收到了来自服务器的非法数据');
                }
            } else {
                // alert("服务器响应异常");
                console.log("服务器响应异常");
                if(msg.message!=null){
                    alert(msg.message);
                }
               
                
            }

        };
        webSocket.onclose = function () {
           
            console.log("websocket服务关闭");
           
            
        };
        webSocket.onerror = function () {
            console.log('WebSocket连接错误');
        };
        webSocket.onopen = function () {
            console.log('开启webSocket连接 ');
        };
        window.onbeforeunload = function () {
            webSocket.close();
        };

        $.ajax({
            url: "/user/getUserInfo",
            type: "post",
            success: function (rs) {
                data = rs.data;
                let item = document.querySelector("#screen");
                item.innerHTML = "玩家名称" + data.userName + "玩家分数:" + data.score + " <br>比赛场次:" +
                    data.totalCount + "获胜场次:" + data.winCount;
            }
        })



        function findPlayer() {
            console.log("点击按钮");


            // 检查连接
            if (webSocket.CLOSED == webSocket.readyState) {
                alert("链接已断开,请重新登陆");
                location.replace("game_hub.html");

            }
            // 开始匹配
            let text = $("#submit").text();
            if (text == "开始匹配") {

                webSocket.send(JSON.stringify({
                    message: 'startFindPlayer'
                }));
            } else if (text == '匹配中...(再次点击停止匹配)') {
                webSocket.send(JSON.stringify({
                    message: 'stopFindPlayer'
                }));

            }



        }




    </script>

</body>

</html>